<template>
  <footer class="footbar">
    <div v-for="menu in menus" 
      class="footbar-item" 
      :class="{'is-active': `/${menu.path}` === activeMenu}"
      @click="changeMenu(menu)">
      <div><i class="fa" :class="`fa-${menu.icon}`"></i></div>
      <div>{{menu.label}}</div>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'footbar',
  computed: {
    activeMenu () {
      return this.$route.path
    }
  },
  data () {
    return {
      menus: [
        {path: '', label: '贷款', icon: 'usd'},
        {path: 'tally', label: '记账', icon: 'calendar-o'},
        {path: 'detail', label: '明细', icon: 'list'},
        {path: 'discover', label: '发现', icon: 'telegram'},
        {path: 'set', label: '设置', icon: 'asterisk'}
      ]
    }
  },
  methods: {
    changeMenu (menu) {
      this.$router.push(`/${menu.path}`)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~scss/base.scss';
.footbar{
  align-items: stretch;
  display: flex;
  position: fixed;
  background: white;
  width: 100%;
  height: 50px;
  bottom: 0;
  border-top: 1px solid #eee;
  .footbar-item{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 2;
    flex-basis: 0;
    flex-shrink: 0;
    & > div:first-child {
      margin-bottom: 5px;
    }
    &.is-active {
      color: white;
      background: $active-color;
    }
  }
}
</style>
